import { useState } from 'react'
import reactLogo from '../assets/react.svg'
import viteLogo from '/vite.svg'
import './logo.css'
import PictureInPictureButton from './PictureInPictureButton.jsx'
import HomeButton from './HomeButton.jsx'
import { Space, Divider } from "antd";
import GraphQLExplorerButton from './graphiql/GraphQLExplorerButton.jsx';
import FormulasButton from './math/FormulasButton.jsx';
import ResumeButton from './resume/ResumeButton.jsx';
import AntdColorTextButton from './resume/AntdColorTextButton.jsx';
import EnglishFontStudioButton from './EnPrint/EnglishFontStudioButton.jsx';
import StarHistoryButton from './EnPrint/StarHistoryButton.jsx';



function Logo() {
    const [count, setCount] = useState(0)

    return (<>
        <div id="logoRoot">

            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo" />
                </a>
                <a href="https://react.dev" target="_blank">
                    <img src={reactLogo} className="logo react" alt="React logo" />
                </a>
            </div>
            <h1>Vite + React</h1>
            <div className="card">
                <button onClick={() => setCount((count) => count + 1)}>
                    count is {count}
                </button>
                <p>
                    Edit <code>src/App.jsx</code> and save to test HMR
                </p>
            </div>
            <p className="read-the-docs">
                Click on the Vite and React logos to learn more
            </p>
            <Space>
                <PictureInPictureButton />
                <HomeButton />
                <GraphQLExplorerButton />
                <FormulasButton />
                <ResumeButton />
                <AntdColorTextButton />

            </Space>
            <Divider variant="dotted" style={{ borderColor: '#7cb305' }}>
                Dotted
            </Divider>
            <Space>
                <EnglishFontStudioButton />
                <StarHistoryButton />
            </Space>

            
        </div>
        
    </>

    )
}

export default Logo;
